<template>
  <view class="project-card" @tap="goToRecord">
    <!-- 上半区：项目名称 + 数量 + 状态 -->
    <view class="project-header">
      <text class="project-name">{{ project.projectName }}</text>
      <view class="project-meta">
        <text class="project-quantity">剩余: {{ project.quantity }}</text>
        <!-- 根据状态动态添加样式 -->
        <text 
          class="project-status"
          :class="statusClass"
        >
          {{ statusText }}
        </text>
      </view>
    </view>

    <!-- 下半区：价格标签 + 操作按钮 -->
    <view class="project-footer">
      <text
        class="project-price"
        :class="{ free: project.price === 0 }"
      >
        {{ project.price === 0 ? '免费' : '¥' + project.price.toFixed(2) }}
      </text>
      <button class="record-button" @tap.stop="goToRecord">
        去记录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProjectCard",
  async onLoad(options) {
    this.customerId = options.customerId
    this.customerName = decodeURIComponent(options.customerName || '')
    /* … */
  },
  props: {
    project: {
      type: Object,
      required: true,
      // { projectId, code, projectName, price, quantity, status }
    },
	customerId: { type: [String, Number], required: true },
	    customerName: { type: String, required: true }
  },
  computed: {
    statusText() {
      switch (this.project.status) {
        case 1: return "正常";
        case 2: return "即将到期";
        case 3: return "已过期";
        default: return "--";
      }
    },
    statusClass() {
      switch (this.project.status) {
        case 1: return 'status-normal';
        case 2: return 'status-warning';
        case 3: return 'status-expired';
        default: return '';
      }
    }
  },
  methods: {
 goToRecord() {
      console.log('跳转到添加护理记录页面，参数：', {
        customerId: this.customerId,
        projectId: this.project.projectId,
        customerName: this.customerName,
        projectName: this.project.projectName
      });
      uni.navigateTo({
        url:
          `/pages/addCareRecord/addCareRecord?` +
          `customerId=${this.customerId}` +
          `&projectId=${this.project.projectId}` +
          `&customerName=${encodeURIComponent(this.customerName)}` +
          `&projectName=${encodeURIComponent(this.project.projectName)}`
      });
    }
  }
};
</script>

<style scoped>
.project-card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 16px;
  width: calc(100% - 32px);
  max-width: 327px;
  margin: 0 auto 16px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.project-name {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.project-meta {
  display: flex;
  align-items: center;
}

.project-quantity {
  font-size: 14px;
  color: #555555;
  margin-right: 12px;
}

.project-status {
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 8px;
  color: #ffffff;
}

/* 状态样式 */
.status-normal {
  background-color: rgba(0, 195, 176, 0.4); /* 正常：绿色/蓝色 */
}
.status-warning {
  background-color: rgba(230, 0, 18, 0.2); /* 即将到期：红色 */
}
.status-expired {
  background-color: #cdcdcd; /* 已过期：灰色 */
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-price {
  font-size: 16px;
  font-weight: 600;
}

.project-price.free {
  color: #e78b00;
}

.record-button {
  background-color: #00C3B0;
  color: #ffffff;
  font-size: 14px;
  padding: 6px 14px;
  margin-right: 10px;
  border-radius: 12px;
  line-height: 1;
}
</style>
